<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz</title>
    
    <meta name="description" content="impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com." />
    <meta name="author" content="Bartek Szopka" />

    <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />

    <link href="css/impress-demo.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <link href="css/bootstrap2.css" rel="stylesheet" />

    <link rel="shortcut icon" href="favicon.png" />
    <link rel="apple-touch-icon" href="apple-touch-icon.png" />

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body class="impress-not-supported">
    <div class="fallback-message">
        <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
        <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
    </div>
    
    <div id="impress">
        <div class="step" data-x="1000" data-y="-1500">
            <div id="Weather">
                    <!-- Widget Weather -->
                    <div class="widget-container widget-weather boxed boxed-bg2">
                        <div class="weather-highlighted">
                            <div class="weather-item clearfix su"><i class="icon-weather icon-weather-1"></i><div class="inner"><strong>31&deg;</strong><span>Mostly Sunny</span><span>31&deg;/18&deg;</span></div></div>
                            <div class="weather-item clearfix mo"><i class="icon-weather icon-weather-1"></i><div class="inner"><strong>20&deg;</strong><span>Rain</span><span>20&deg;/11&deg;</span></div></div>
                            <div class="weather-item clearfix tu active"><i class="icon-weather icon-weather-1"></i><div class="inner"><strong>27&deg;</strong><span>Partly Cloudy</span><span>27&deg;/15&deg;</span></div></div>
                            <div class="weather-item clearfix we"><i class="icon-weather icon-weather-1"></i><div class="inner"><strong>23&deg;</strong><span>Cloudy</span><span>23&deg;/14&deg;</span></div></div>
                            <div class="weather-item clearfix th"><i class="icon-weather icon-weather-1"></i><div class="inner"><strong>26&deg;</strong><span>Mostly Sunny</span><span>26&deg;/16&deg;</span></div></div>
                            <div class="weather-item clearfix fr"><i class="icon-weather icon-weather-1"></i><div class="inner"><strong>32&deg;</strong><span>Sunny</span><span>32&deg;/19&deg;</span></div></div>
                            <div class="weather-item clearfix sa"><i class="icon-weather icon-weather-1"></i><div class="inner"><strong>24&deg;</strong><span>Light Rain</span><span>24&deg;/12&deg;</span></div></div>
                        </div>
                        <div class="weather-location clearfix">
                            <!--<strong>Bucharest</strong>
                            <form id="searchForm2" class="weather-search-form" method="post">
                                <input type="text" name="search2" value="" class="weather-search-field" />
                                <input type="submit" value="" class="btn weather-search-submit" name="search-send2" />
                            </form> -->
                        </div>
                        <ul class="weather-forecast clearfix">
                            <li><a href="javascript:;" id="su"><strong>su</strong><span><i class="icon-weather icon-weather-1"></i></span><span>31&deg;</span></a></li>
                            <li><a href="javascript:;" id="mo"><strong>mo</strong><span><i class="icon-weather icon-weather-2"></i></span><span>20&deg;</span></a></li>
                            <li><a href="javascript:;" id="tu" class="active"><strong>tu</strong><span><i class="icon-weather icon-weather-3"></i></span><span>27&deg;</span></a></li>
                            <li><a href="javascript:;" id="we"><strong>we</strong><span><i class="icon-weather icon-weather-4"></i></span><span>23&deg;</span></a></li>
                            <li><a href="javascript:;" id="th"><strong>th</strong><span><i class="icon-weather icon-weather-1"></i></span><span>26&deg;</span></a></li>
                            <li><a href="javascript:;" id="fr"><strong>fr</strong><span><i class="icon-weather icon-weather-1"></i></span><span>32&deg;</span></a></li>
                            <li><a href="javascript:;" id="sa"><strong>sa</strong><span><i class="icon-weather icon-weather-5"></i></span><span>24&deg;</span></a></li>
                        </ul>
                    </div>
                    <!--/ Widget Weather -->
            </div>
            <div id="Myself">
                    <!-- Avatar Placeholder -->
                    <div class="widget-container widget-avatar boxed boxed-yellow">
                        <div class="inner">
                            <h5>Jack Daniels</h5>
                            <span class="subtitle">Antepreneur</span>
                            <div class="avatar"><img src="images/temp/myself.jpg" alt="" /></div>
                            <div class="followers"><span class="counter" data-from="10" data-to="128" data-speed="5000" data-refresh-interval="25"></span> followers</div>
                            <a href="#" class="btn btn-brown btn-follow"><span><i></i>Follow</span></a>
                        </div>
                    </div>
                    <!--/ Avatar Placeholder -->
            </div>
            <div id="Menu">
                <ul class="dropdown dropdown-icons clearfix boxed boxed-blue">
                            <li class="menu-level-0 hover"><a href="#"><span><i class="icon-menu"></i></span></a>
                                    
                            </li>
                            <li class="menu-level-0"><a href="#"><span><i class="icon-menu icon-menu-2"></i></span></a>
                                <ul class="submenu-1">
                                    <li class="menu-level-1"><a href="#">Submenu 1</a></li>
                                    <li class="menu-level-1"><a href="#">Submenu 2</a></li>
                                    <li class="menu-level-1"><a href="#">Submenu 3</a></li>
                                    <li class="menu-level-1"><a href="#">Submenu 4</a></li>
                                </ul>
                            </li>
                            <li class="menu-level-0"><a href="#"><span><i class="icon-menu icon-menu-3"></i></span></a>
                                <ul class="submenu-1">
                                    <li class="menu-level-1"><a href="#">Submenu 1</a></li>
                                    <li class="menu-level-1"><a href="#">Submenu 2</a></li>
                                    <li class="menu-level-1"><a href="#">Submenu 3</a></li>
                                    <li class="menu-level-1"><a href="#">Submenu 4</a></li>
                                    <li class="menu-level-1"><a href="#">Submenu 5</a>
                                        <ul class="submenu-2">
                                            <li class="menu-level-2"><a href="#">Submenu 1</a></li>
                                            <li class="menu-level-2"><a href="#">Submenu 2</a></li>
                                            <li class="menu-level-2"><a href="#">Submenu 3</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="menu-level-0"><a href="#"><span><i class="icon-menu icon-menu-4"></i></span></a>
                                <ul class="submenu-1">
                                    <li class="menu-level-1"><a href="#">Submenu 1</a></li>
                                    <li class="menu-level-1"><a href="#">Submenu 2</a></li>
                                    <li class="menu-level-1"><a href="#">Submenu 3</a>
                                        <ul class="submenu-2">
                                            <li class="menu-level-2"><a href="#">Submenu 1</a></li>
                                            <li class="menu-level-2"><a href="#">Submenu 2</a></li>
                                        </ul>
                                    </li>
                                    <li class="menu-level-1"><a href="#">Submenu 4</a></li>
                                </ul>
                            </li>
                </ul>
            </div>
        </div>

        <div class="step" data-x="1700" data-y="-1630">
            <div id="chart1">
                <span class="chart" data-percent="86" data-bar-color="#981b48">
                    <a class="percent"></a>
                </span>
                <span class="chart" data-percent="69" data-bar-color="#e49307">
                    <a class="percent"></a>
                </span>
                <span class="chart" data-percent="75" data-bar-color="#11a9cc">
                    <a class="percent"></a>
                </span>
            </div>

            <div id="chart2">
                <span class="chart2" data-percent="75" data-bar-color="#981b48">
                    <a class="percent"></a>
                </span>
                <span class="chart3" data-percent="75" data-bar-color="#3B5998">
                    <a class="percent"></a>
                </span>
                <span class="chart4" data-percent="65" data-bar-color="#085466">
                    <a class="percent"></a>
                </span>
            </div>
        </div>

        <div class="step" data-x="700" data-y="-1300">
            <div id="Fusce">
                <h5>Fusce dui est,sodales eu gravida ac</h5>
                <div class="subtitle">Author: Jason Dce  Time: 18/12/2014 10:58 AM</div>
                <div class="grid-box grid-box-large">
                    <a href="#" class="boxed boxed-turquoise">
                        <strong><img src="images/icons/sun2.gif"></strong>
                    </a>
                </div>
                <div class="myblog">Command line utilities are just regular node programs. They are available globally and can be called from any folder. So the steps for creating our command-line application are nearly identical to any other node-based project that you might have developed before. Create a new folder for your project and navigate to it in your terminal. We will refer to it as your project folder.</div>
                <div class="grid-box-min">
                    <a href="#" class="boxed boxed-box1">      
                    </a>
                </div>
                <div class="grid-box-min">
                    <a href="#" class="boxed boxed-box3">        
                    </a>
                </div>
                <div class="grid-box-min">
                    <a href="#" class="boxed boxed-box2">     
                    </a>
                </div>

                <div id="contant">
                    <div class="grid-menu clearfix">
                        <div class="grid-box">
                            <a href="#" class="boxed boxed-red">
                                <strong><i class="icon-grid"></i></strong>
                                <span>Games</span>
                            </a>
                        </div>
                        <div class="grid-box">
                            <a href="#" class="boxed boxed-turquoise">
                                <strong><i class="icon-grid icon-grid-2"></i></strong>
                                <span>Contact</span>
                            </a>
                        </div>
                        <div class="grid-box grid-box-large">
                            <a href="#" class="boxed boxed-blue">
                                <strong><i class="icon-grid icon-grid-3"></i></strong>
                                <span>Portfolio</span>
                            </a>
                        </div>
                    </div>  
                </div>

                <div id="topmenu">
                            <ul class="dropdown clearfix boxed boxed-blue">
                                <li class="link-more"><a href="#"><i></i></a></li>
                                <li><a href="#"><span>Home</span></a></li>
                                <li><a href="#"><span>Services</span></a>
                                    <ul>
                                        <li><a href="#">Link 1</a></li>
                                        <li><a href="#">Link 2</a></li>
                                        <li><a href="#">Link 3</a>
                                            <ul>
                                                <li><a href="#">Link 4</a></li>
                                                <li><a href="#">Link 5</a></li>
                                                <li><a href="#">Link 6</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="#"><span>About</span></a></li>
                                <li class="menu-search">
                                    <form id="searchForm" class="menu-search-form" method="post">
                                        <input type="text" name="search" value="" class="menu-search-field" placeholder="Search the website" />
                                        <input type="submit" value="" class="btn menu-search-submit" name="search-send" />
                                    </form>
                                </li>
                            </ul>
                </div>
            </div>
        </div>

        <div class="step" data-x="1800" data-y="-1300">
             <!-- <q>Don't you think that presentations given <strong>in modern browsers</strong> shouldn't <strong>copy the limits</strong> of 'classic' slide decks?</q> -->
            <div id="photo">
                <div class="grid-box grid-box-large">
                    <a href="#" class="boxed boxed-bg3">
                        <strong>
                            <div class="test"></div>
                        </strong>
                    </a>
                </div>
            </div>
        </div>
        <div id="overview" class="step" data-x="1100" data-y="-1350" data-scale="1.5">
        </div>
    </div>

<div class="hint">
    <p>Use a spacebar or arrow keys to navigate</p>
</div>
<script>
if ("ontouchstart" in document.documentElement) { 
    document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
}
</script>
<script src="js/impress.js"></script>
<script>impress().init();</script>
<script src="js/jquery.easypiechart.js"></script>
<script>
    var number = 0;
    $(document).keydown(function(event){
        if(event.keyCode == 39){
            number = number + 1;
            console.log(number);
            if(number == 1){
                setTimeout(function(){
                    $('.chart').easyPieChart({
                        easing: 'easeOutBounce',
                        scaleColor: false,
                        lineWidth: 10,
                        size: 140,
                        trackColor: false,
                        lineCap: 'square',
                        animate: 1500,
                        onStep: function(from, to, percent) {
                            $(this.el).find('.percent').text(Math.round(percent));
                        }
                    });
                    $('.chart2').easyPieChart({
                        easing: 'easeOutBounce',
                        scaleColor: false,
                        lineWidth: 30,
                        size: 110,
                        trackColor: false,
                        lineCap: 'butt',
                        animate: 1600,
                        onStep: function(from, to, percent) {
                            $(this.el).find('.percent').text(Math.round(percent));
                        }
                    });
                    $('.chart3').easyPieChart({
                        easing: 'easeOutBounce',
                        scaleColor: false,
                        lineWidth: 30,
                        size: 110,
                        trackColor: false,
                        lineCap: 'butt',
                        animate: 1800,
                        onStep: function(from, to, percent) {
                            $(this.el).find('.percent').text(Math.round(percent));
                        }
                    });
                    $('.chart4').easyPieChart({
                        easing: 'easeOutBounce',
                        scaleColor: false,
                        lineWidth: 30,
                        size: 110,
                        trackColor: '#FFF',
                        trackWidth: 30,
                        lineCap: 'butt',
                        animate: 2000,
                        onStep: function(from, to, percent) {
                            $(this.el).find('.percent').text(Math.round(percent));
                        }
                    });
                },900);
            };
        }
    });
</script>
<script src="js/jquery.countTo.js"></script>
<script>
    $('.counter').countTo();
</script>
</body>
</html>